import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    TouchableWithoutFeedback,
    KeyboardAvoidingView,
    TextInput,
    Button
} from 'react-native';

import random from "../util/random";
import TimerButton from "../view/TimerButton";
const dismissKeyboard = require('dismissKeyboard');     // 获取键盘回收方法
import styles from './css/LoginPageStyle';
export default class LoginPage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            mobile: '',     // 手机号
            mobileValid: false,   // 手机号有效
            mobileNotEmpty: true, // 手机号已输入
            smsCode: '',         // 短信验证码
            smsCodeValid: false,          // 短信验证码有效
            acceptLic: true,// 同意许可协议
            picURLStr: '',// 图片验证码原始地址
            picURL: {uri: ''},// 图片验证码地址
            verifyText: '',// 图片验证码提示语
            vCode: '',         // 图片验证码
            vCodeInputValid: true,          // 图片验证码输入有效
            vCodeServerValid: true,          // 图片验证码服务端有效
            // timerButtonEnable: false, // 倒计时按钮是否可用
            timerButtonClicked: false,//  倒计时按钮是否已点击
            headPad: 20,// 顶部的默认空白
            device: random(11), // 随机
            openMobileLogin: true, // 是否启用手机号登陆模式, 仅针对iOS AppStore提审
            mobileLogin: true, // 显示手机号登陆模式, 仅针对iOS AppStore提审
        };



    }

    render() {
        return (
            <TouchableWithoutFeedback onPress={dismissKeyboard}>

                <View style={{flex: 1, backgroundColor: 'white'}}>

                    <Text style={{alignSelf: 'center', fontSize: 16, color : '#333333', marginTop: 73,marginBottom: 30}}>手机号快捷登录</Text>


                    { this.renderLoginView()}


                </View>
            </TouchableWithoutFeedback>
        );
    }
    // 渲染登录UI主体
    renderLoginView = () => {
        return (
            <KeyboardAvoidingView behavior='padding' style={[styles.containerKeyboard,
                {backgroundColor: 'white'}]}
                                  keyboardVerticalOffset={0}>
                {/*   手机号 */}
                <View style={styles.textInputContainer}>

                    <View style={[styles.textInputWrapper, {marginLeft: 41, marginRight: 41}]}>
                        <TextInput underlineColorAndroid='transparent' maxLength={11}
                                   keyboardType='numeric' value={this.state.mobile}
                                   placeholderTextColor='#999999'
                                   style={[styles.textInput, {paddingLeft:17} ]} placeholder='+86 输入手机号码' returnKeyType='next'
                                   onChangeText={
                                       (mobile) => {
                                           this.updateMobile(mobile);
                                       }
                                   }/>
                    </View>
                </View>



                {/*  短信验证码 */}

                <View  style={styles.vcodeContainer} >

                    <View style={styles.vcodeTextInput}>
                        <TextInput underlineColorAndroid='transparent'
                                   value={this.state.smsCode}
                                   ref="smsCodeInput"
                                   autoCorrect={false}
                                   editable={this.state.mobileValid && this.state.vCodeInputValid && this.state.timerButtonClicked}
                                   secureTextEntry={false} maxLength={6} keyboardType='numeric'
                                   style={[styles.codeInput, {paddingLeft:17} ]} placeholder='输入短信验证码'
                                   placeholderTextColor='#999999'
                                   returnKeyType='done'
                                   onChangeText={(smsCode) => {
                                       this.setState({smsCode})
                                       let smsCodeValid = (smsCode.length === 6);
                                       this.setState({smsCode, smsCodeValid});
                                       if (smsCodeValid) {
                                           dismissKeyboard();
                                       }
                                   }}

                                   onBlur={() => {
                                       dismissKeyboard();
                                   }}

                                   onSubmitEditing={() => {
                                       dismissKeyboard();
                                   }}
                        />
                    </View>


                    <View style={[styles.rightViewStyle, {height: 46,width:90, backgroundColor: '#F7F7F7', borderRadius: 4}]}>
                        <TimerButton enable={this.state.mobileValid && this.state.vCodeInputValid}
                                     ref="timerButton"
                                     style={{flex:1, alignSelf: 'center',}}
                                     textStyle={{color: '#6A6A6A', alignSelf: 'center'}}
                                     timerCount={60}
                                     onClick={(shouldStartCountting) => {
                                         shouldStartCountting(true);
                                         this.setState({timerButtonClicked: true});
                                         this._requestSMSCode(shouldStartCountting);
                                     }}/>
                    </View>

                </View>
                <View style = {[styles.buttonViewEnabled,{backgroundColor:this.state.mobileValid && this.state.vCodeServerValid ? '#729DD5':'#B8CFE6'}]}   >
                    <TouchableOpacity onPress={this._doLoginMulti}>
                        <Text style={styles.buttonText}>
                            登录
                        </Text>

                    </TouchableOpacity>


                </View>
            </KeyboardAvoidingView>
        );
    };
    updateMobile(mobile) {
    // 如果手机号改了, 马上就重置获取验证码?  vCodeInput
        if (this.refs.timerButton && this.refs.timerButton.state.counting) {
            this.refs.timerButton.reset();
        }
        this.setState({timerButtonClicked: false});

        mobile = mobile.replace(/[^\d]/g, '');// 过滤非数字输入
        let mobileValid = mobile.length > 0 && (mobile.match(/^([0-9]{11})?$/)) !== null;
        // let mobileNotEmpty = mobile.length > 0;改了
        let mobileNotEmpty = true;


        this.setState({mobile, mobileValid, mobileNotEmpty, smsCode: '', smsCodeValid: false, vCode: ''});
    }
    _doLoginMulti = () => {
        // this.state.mobileNotEmpty? this._doLogin() : this._goWechat();

        this._doLogin()
    };
    // 点击了登录
    _doLogin(){
        if(this.state.mobileValid && this.state.vCodeServerValid){
            // 手机号正确可点击
            console.log('111111')
            UserInfoStore.setUserToken(responseData.token).then(
                v => {
                    console.log('1_111_11')

                },
                e => console.log(e.message)
            );
        }else {
            // 手机号不足11位不可点击
            console.log('22222')
        }


    }
    // 请求短信验证码
    _requestSMSCode(shouldStartCountting) {
        console.log('_requestSMSCode');

    }

}
